<!DOCTYPE html>
<html>
<head>

    <title>Form validation using jQuery</title>

    <meta charset="UTF-8"/>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script type="text/javascript" src="jquery.formvalidator.min.js?upd=1.5.1"></script>

    <link href="style.css?upd=1.5" type="text/css" rel="stylesheet"/>

</head>
<body>

    <h1>
        jQuery Form Validation (v 1.5.1)
    </h1>
    <p>
        <a href="https://github.com/victorjonsson/jQuery-Form-Validator/">
            https://github.com/victorjonsson/jQuery-Form-Validator/
        </a>
    </p>

    <h2>
        Basic concept
    </h2>
    <code>
        &lt;form onsubmit="return $(this).validate()"&gt;<br/>
        &nbsp;&nbsp;&lt;input data-validation="some_predefined_rule" /&gt;<br/>
        &nbsp;&nbsp;...<br/>
        &lt;/form&gt;
    </code>

    <h2>Example of all features</h2>
    <div class="section">
        <form action="" onsubmit="if($(this).validate()) alert('Valid!'); return false;">
            <p>
                <strong>Required</strong> <em>required</em><br/>
                <input type="text" data-validation="required"/>
            </p>

            <p>
                <strong>Minimum length</strong> <em>validate_min_length length5</em><br/>
                <input type="text" data-validation="validate_min_length length5"/>
            </p>

            <p>
                <strong>Max length</strong> <em>validate_max_length length5</em><br/>
                <textarea data-validation="validate_max_length length5" rows="4"></textarea>
            </p>

            <p>
                <strong>Length between 3-5 characters</strong> <em>validate_length length3-5</em><br/>
                <textarea data-validation="validate_length length3-5" rows="4"></textarea>
            </p>

            <p>
                <strong>E-mail</strong> <em>validate_email</em><br/>
                <input type="text" data-validation="validate_email"/>
            </p>

            <p>
                <strong>Domain</strong> <em>validate_domain</em><br/>
                <input type="text" data-validation="validate_domain"/>
            </p>

            <p>
                <strong>Url</strong> <em>validate_url</em><br/>
                <input type="text" data-validation="validate_url"/>
            </p>

            <p>
                <strong>Float</strong> <em>validate_float</em><br/>
                <input type="text" data-validation="validate_float"/>
            </p>

            <p>
                <strong>Integer</strong> <em>validate_int</em><br/>
                <input type="text" data-validation="validate_int"/>
            </p>

            <p>
                <strong>Time HH:mm</strong> <em>validate_time</em><br/>
                <input type="text" data-validation="validate_time"/>
            </p>

            <p>
                <strong>Date yyyy-mm-dd</strong> (Custom date format is also possible) <em>validate_date</em><br/>
                <input type="text" data-validation="validate_date"/>
            </p>

            <p>
                <strong>Birthdate yyyy-mm-dd</strong> <em>validate_birthdate</em><br/>
                <input type="text" data-validation="validate_birthdate"/>
            </p>

            <p>
                <strong>Valid telephone number</strong> <em>validate_phone</em><br/>
                <input type="text" data-validation="validate_phone"/>
            </p>

            <p>
                <strong>Valid Swedish mobile telephone number</strong> <em>validate_swemobile</em><br/>
                <input type="text" data-validation="validate_swemobile"/>
            </p>

            <p>
                <strong>Valid Swedish social security number yyyymmddXXXX</strong> <em>validate_swesc</em><br/>
                <input type="text" data-validation="validate_swesc"/>
            </p>
            
            <p>
                <strong>UK VAT Number</strong> <em>validate_ukvatnumber</em><br/>
                <input type="text" name="4" data-validation="validate_ukvatnumber"/>
            </p>

            <p>
                <strong>Custom validation</strong>
                <em>validate_custom regexp/^[a-z]{2} [0-9]{2}$/</em>
                <input type="text" data-validation="validate_custom regexp/^[a-z]{2} [0-9]{2}$/"/>
            </p>

            <p>
                <strong>Simple captcha, this field has to contain value "jqueryvalidation"</strong> <em>validate_spamcheck
                captcha[VALUE-TO-VALIDATE]</em><br/>
                <input type="text" data-validation="validate_spamcheck captchajqueryvalidation"/>
            </p>
            <p>
                <strong>One of these radio buttons has to be checked</strong>
                <em>required</em>
                <br />
                <input type="radio" data-validation="required" name="s1" value="0" /> Yes<br />
                <input type="radio" name="s1" value="1" /> No<br />
                <input type="radio" name="s1" value="2" /> Maybe
            </p>
            <p>
                <strong>These two inputs has to have identical values (minimum 3 characters)</strong> <em>validate_confirmation length3</em><br/>
                <input type="text" name="something" data-validation="validate_confirmation validate_min_length length3"/>
                <input type="text" name="something_confirmation"/>
            </p>
            <p>
                <strong>These features applies to select lists as well</strong>
                <br />
                <select name="whatever" data-validation="required">
                    <option value="">- - Select something - -</option>
                    <option value="1">Green</option>
                    <option value="2">Blue</option>
                    <option value="red">Red</option>
                </select>
            </p>
            <p>
                <strong>These features applies to select lists with multiple options as well.
                You have to select at least two answers from this list and you'r not allowed
                to select &quot;* Not allowed&quot;</strong>
                <br />
                <em>validate_num_answers num2 validate_int</em>
                <br />
                <select name="something" multiple="multiple" size="5" data-validation="validate_num_answers num2 validate_int">
                    <option value="">- - Select something - -</option>
                    <option value="1">Green</option>
                    <option value="2">Blue</option>
                    <option value="blue">* Not allowed</option>
                    <option value="3">Purple</option>
                    <option value="4">Black</option>
                    <option value="red">* Not allowed</option>
                </select>
            </p>
            <p>
                <strong>Website, optional (this input will only be validated if it has a value)</strong>
                <em>data-validation-optional=&quot;true&quot; data-validation=&quot;validate_url&quot;</em>
                <input type="text" data-validation="validate_url" data-validation-optional="true"/>
            </p>
            <p>
                <strong>E-mail (this input will not be validated unless this checkbox is checked
                    <input type="checkbox" name="my_checkbox" value="1" />)</strong>
                <br />
                <em>data-validation-if-checked=&quot;my_checkbox&quot; data-validation=&quot;validate_email&quot;</em>
                <input type="text" data-validation="validate_email" data-validation-if-checked="my_checkbox"/>
            </p>
            <p>
                <strong>Length restriction</strong>
                    <span class="chars_left">
                        <span id="maxlength">50</span> characters left
                    </span>
                <br/>
                <textarea rows="4" id="area"></textarea>
            </p>
            <script type="text/javascript">
                $('#area').restrictLength($('#maxlength'));
            </script>
            <p>
                <input type="submit" value="Validate form"/>
            </p>
        </form>
    </div>

    <h2>
        Customized example (no border color on error, different position on error messages, validate input value on blur)
    </h2>
    <div class="section">
        <form action="" id="custom_form">
            <p>
                <strong>Length between 3-5 characters</strong> <em>validate_length length3-5</em><br/>
                <textarea name="1" data-validation="validate_length length3-5" rows="4"></textarea>
            </p>

            <p>
                <strong>E-mail</strong> <em>validate_email</em><br/>
                <input type="text" name="2" data-validation="validate_email"/>
            </p>

            <p>
                <strong>Domain</strong> <em>validate_domain</em><br/>
                <input type="text"id="testing" name="3" data-validation-help="No protocol is needed" data-validation="validate_domain"/>
            </p>

            <p>
                <strong>Url</strong> <em>validate_url</em><br/>
                <input type="text" name="4" data-validation="validate_url"/>
            </p>

            <p>
                <strong>When will you arrive</strong>
                <em>The answer given on the question below will only be validated if this option is checked</em>
                <input type="checkbox" name="disable_hours" checked="checked"/>
            </p>

            <p>
                <strong>Time HH:mm</strong> <em>validate_time</em><br/>
                <input type="text" data-validation-if-checked="disable_hours" data-validation="validate_time" name="hours"/>
            </p>
            <p>
                <strong>Date yyyy-mm-dd (optional)</strong> <em>validate_date - This input will only be validated if it has a value</em><br/>
                <input type="text" data-validation="validate_date" data-validation-optional="true" data-validation-error-msg="If you want to leave a date, it has to be correct" name="opt_date"/>
            </p>
            <p>
                <input name="7" type="submit" value="Validate form"/>
            </p>
        </form>
        
        <script>
            var validationSettings = {
                errorMessagePosition : 'element',
                borderColorOnError : ''
            };

            $('#custom_form')
                .submit(function() {
                    if ($(this).validate(false, validationSettings))
                        alert('Valid!');

                    return false;
                })
                .validateOnBlur(false, validationSettings)
                .showHelpOnFocus();
            
        </script>

    </div>
</body>
</html>
